<template>
	<view class="coupon-modal">
		<view class="coupon-dialog">
			<view class="coupon-pic">
				<image class="coupon-img" src="../../static/img/coupon.png" mode="aspectFill"></image>
				<view class="pon">
					<view class="pirce">
						<text class="u">￥</text>
						<text>100</text>
					</view>
					<view class="name">
						满￥1000可用
					</view>
				</view>
				<view class="line tit">
					恭喜您收到我们提供的优惠券
				</view>
				<view class="line p">
					快去使用吧
				</view>
				<image src="../../static/img/know.png" mode="aspectFill" class="know" @click="close"></image>
			</view>
			<view class="coupon-close" @click="close">
				<image class="close-img" src="../../static/img/coupon-close.png" mode="aspectFill"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style>
.coupon-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	background: rgba(0,0,0,.6);
}
.coupon-dialog {
	position: absolute;
	top: 100upx;
	left: 75upx;
	right: 75upx;
	z-index: 100;
	height: 875upx;
}
.coupon-pic {
	width: 600upx;
	height: 671upx;
	margin: 0 auto;
	position: relative;
}
.coupon-img {
	width: 600upx;
	height: 617upx;
	position: absolute;
	z-index: 101;
}
.pon {
	display: flex;
	position: absolute;
	width: 100%;
	height: 170upx;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 102;
}
.pirce {
	width:155upx;
	height:78upx;
	font-size:104upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	transform: translate(50upx,-15upx);
}
.u {
	font-size: 36upx;
}
.name {
	width:180upx;
	height:85upx;
	font-size:40upx;
	font-weight:500;
	color:rgba(117,97,68,1);
	transform: translate(-80upx,5upx);
}
.line {
	position: absolute;
	height:38upx;
	font-size:40upx;
	font-weight:400;
	color:rgba(216,174,116,1);
	text-shadow:0px 7upx 0upx rgba(62,50,35,0.67);
	text-align: center;
	z-index: 102;
	margin: 0 auto;
	width: 100%;
}
.tit {
	top: 363upx;
}
.p {
	top: 440upx;
}
.coupon-close {
	width: 69upx;
	height: 220upx;
	margin: 0 auto;
	position: relative;
	top: -50upx;
}
.close-img {
	width: 69upx;
	height: 220upx;
	position: absolute;
	z-index: 101;
}
.know {
	width: 440upx;
	height: 112upx;
	display: block;
	position: absolute;
	top: 504upx;
	left: 79upx;
	z-index: 102;
}
</style>
